<template>
    <div class="long-text">
        <div>{{ truncatedText }} <el-button type="text" @click="toggleShowAll" v-if="isExpanded">{{ showAll ? '收起' :
                '展开' }}</el-button></div>
    </div>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            required: true
        },
        maxLength: {
            type: Number,
            default: 20
        }
    },
    data() {
        return {
            showAll: false,
            localMaxLength: this.maxLength,
        }
    },
    computed: {
        truncatedText() {
            if (this.text.length <= this.localMaxLength) {
                return this.text;
            }
            return this.text.substring(0, this.maxLength) + '...';
        },
        isExpanded() {
            return this.text.length > this.maxLength;
        }
    },
    methods: {
        toggleShowAll() {
            if (this.showAll) {   //true->false
                this.localMaxLength = this.maxLength;
            }
            if (!this.showAll) {
                this.localMaxLength = Infinity;
            }
            this.showAll = !this.showAll
        }
    }
}
</script>

<style scoped>
.long-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
</style>